<template>
    <el-card class="box-card">
        <video id="polyVideo" class="video-js vjs-default-skin vjs-fluid" data-setup='{"nativeControlsForTouch":false}' controls preload="auto">
            <source :src="videoSrc" type="application/x-mpegURL">
        </video>
    </el-card>
</template>

<script>
    import {StringUtil} from "../../../../static/utils/StringUtil";
    export default {
        name: "resource",
        data(){
          return {
              videoSrc: ''
          }
        },
        mounted(){
            let metaId = this.$route.query.metaId;
            let vid = this.$route.query.vid;
            this.videoSrc = StringUtil.format('http://127.0.0.1:38888/{0}/video/{1}/hlsIndex.m3u8', metaId, vid);
            this.$nextTick(() => {
                let player = videojs("polyVideo");
                player.on('canplay', function () {
                    console.log('on canplay');
                });
                player.play();
            })
        }
    }
</script>

<style scoped>

</style>
